﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet" />
    <style>
        body{
            background: #f6f6f6;
        }
        .veads1_i1{
            display: block;
            float: left;
            margin-top: 2%;
            width: 2.5%;
        }
        .veads1_s1{
            display: block;
            text-align: center;
            font-size: 1.8rem;
        }
        .am-tabs{
            background: #fff;
        }
        .am-nav-tabs{
            border:1px solid #efefef;
            background: #fff;
        }
        .am-nav-tabs > li.am-active > a, .am-nav-tabs > li.am-active > a:hover, .am-nav-tabs > li.am-active > a:focus{
            border:none;
            border-bottom:1px solid #6fddb1;
        }
        .am-nav-tabs > li > a{
            padding: 10% 0;
        }
        .am-tabs-bd{
            border:none;
        }
    </style>
</head>
<body>
    <div class="page" id="page" v-cloak>
        <header data-am-widget="header" class="am-header am-header-default" style="background-color: #FFFFFF; border-bottom: 1px solid rgb(211, 211, 211);">
            <div class="am-header-left am-header-nav" onclick="goBack()">
                <a href="javascript:" class="">
                    <img class="am-header-icon-custom" src="images/veas07.png" alt="" />
                </a>
            </div>
            <h4 class="am-header-title" style=" color: black;">我的订单</h4>
            <div class="am-header-right am-header-nav"><a href="/Wap/Index.html" class="am-header-icon am-icon-home" style="color: #A9A9A9; "></a></div>
        </header>
        <div class="am-tabs" id="doc-tab-demo-1">
            <!--data-am-tabs="{noSwipe: 1}"-->
            <ul class="am-tabs-nav am-nav am-nav-tabs" style="background: #fff">
                <li class="am-active am-u-sm-3" v-on:click="choose(-3,0)"><a href="javascript:" style="color: #8f8f8f;text-align: center;">全部</a></li>
                <li class=" am-u-sm-3" v-on:click="choose(0,1)"><a href="javascript:" style="color: #8f8f8f;text-align: center;">未付费</a></li>
                <li class=" am-u-sm-3" v-on:click="choose(1,2)"><a href="javascript:" style="color: #8f8f8f;text-align: center;">已付费</a></li>
                <li class=" am-u-sm-3" v-on:click="choose(-1,3)"><a href="javascript:" style="color: #8f8f8f;text-align: center;">已过期</a></li>
            </ul>

            <div class="am-tabs-bd">
                <div style="padding: 0" class="am-tab-panel am-active">
                    <div class="am-u-sm-12" style="padding: 0px;background: #f6f6f6">

                        <ul style="margin-top: 3%;margin-bottom: 0;" class="am-list" v-for="list in orderList">
                            <li style="display: block; overflow: hidden; border-top: none; padding: 3% 4%;">
                                <span style="float: left;">{{list.o.Name}}</span>
                                <span style="font-size: 1.5rem; float: right; color: rgb(255, 145, 41);">{{list.o.State==0?"未付款":list.o.State==1?"已付款":list.o.State==-1?"已过期":list.o.State==-2?"已取消":"状态异常"}}</span>
                            </li>
                            <li style="display: block; overflow: hidden;border-bottom: none; padding: 2% 4% 2% 4%;border-bottom:1px solid #dedede">
                                <div style="font-size: 1.5rem; overflow: hidden; margin-bottom: 4%;">
                                    <span style="float: left;">{{list.o.Type==1?"订场订单":list.o.Type==2?"人次票订单":list.o.Type==3?"培训班订单":list.o.Type==4?"私教订单":list.o.Type==5?"活动订单":list.o.Type==6?"报名订单":list.o.Type==7?"会员卡订单":list.o.Type==8?"后台购买商品":list.o.Type==9?"培训人次订单":list.o.Type==10?"培训续费订单":"类型异常"}}</span>
                                    <span style="float: right;">{{list.createTime}}</span>
                                </div>
                                <!--<div style="font-size: 1.5rem; overflow: hidden; margin-bottom: 4%;">
                                    <img src="images/personticket01.png" alt="" style="width: 4.5%; display: block; float: left; margin-right: 2%; margin-top: 0.5%;">
                                    <span style="font-size: 1.5rem;">密山路</span>
                                </div>-->
                                <div style="font-size: 1.5rem; overflow: hidden;    border-bottom: 1px solid #dedede;padding-bottom: 2%;">
                                    <!--<img src="images/vipcard03.png" alt="" style="width: 4.5%; display: block; float: left; margin-right: 2%; margin-top: 0.5%;">
                                    <span style="font-size: 1.5rem; float: left;">123</span>-->
                                    <span style="float: right; font-size: 2rem; color: rgb(35, 199, 136); margin-top: -2%;">￥{{list.o.Money}}</span>
                                </div>
                                <div style="overflow: hidden;padding-top: 2%;text-align: right" v-if="list.o.Type!=8">
                                    <span class="am-badge am-round am-text-default" style="border: 1px solid #8b8b8b;color: #8b8b8b;background: inherit;font-weight: 100" v-on:click="seeInfo(list.o.ordergId,list.o.Type)">查看订单</span>
                                    <!--<span class="am-badge am-round am-text-default" style="border: 1px solid #f8733f;color: #f8733f;background: inherit;font-weight: 100">立即付款</span>-->
                                </div>
                            </li>
                        </ul>

                    </div>
                </div>
                <!--<div class="am-tab-panel">

                </div>
                <div class="am-tab-panel">

                </div>
                <div class="am-tab-panel">

                </div>-->
            </div>
        </div>


        <div v-if="pageinfo.pageCount>page" class="am-list-news-ft" style="padding-bottom:15px;">
            <a class="am-list-news-more am-btn am-btn-default" v-on:click="page=page+1" href="javascript:void(0)">查看更多 &raquo;</a>
        </div>
        <div v-if="pageinfo.pageCount==page" class="am-list-news-ft" style="padding-bottom:15px;color:#757575;">
            无更多数据
        </div>
    </div>
</body>
<script src="https://use.fontawesome.com/ca6b609d64.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script src="js/common.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
<script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.js"></script>
</html>
<script>
    var page = new Vue({
        el: '#page',
        data: {
            orderList: [],
            page: 1,
            pagesize: 10,
            pageinfo: {},
            indexId: -3,
            index: [{
                "indexId": -3,
                "name": "所有订单"
            }, {
                "indexId": 0,
                "name": "未付费"
            }, {
                "indexId": 1,
                "name": "已付费"
            }, {
                "indexId": -1,
                "name": "已过期"
            }, {
                "indexId": -2,
                "name": "已取消"
            }]
        },
        methods: {
            getInfo: function () {
                var that = this;
                $.ajax({
                    type: 'POST',
                    url: apiUrl + '/Api/Mine/GetAllOrder',
                    data: { page: that.page, pagesize: that.pagesize, state: that.indexId },
                    success: function (data) {
                        console.log(data);

                        if (data.errcode == 0) {
                            if (that.page == 1) {
                                that.orderList = data.data.orderList;
                            } else {
                                $(data.data.orderList).each(function () {
                                    that.orderList.push(this);
                                })
                            }
                            that.pageinfo = data.data.Page;
                        } else {
                            alert(data.errmsg);
                        }
                    },
                    //error: function (ex) {
                    //    console.log(ex);
                    //    alert("服务器加载异常");
                    //}
                })
            },
            seeInfo: function (Id, type) {
                if (type == 1) {
                    location.href = "confirmorder.html?Id=" + Id;
                }
                else if (type == 2) {
                    location.href = "TicketOrderInfo.html?TicketgId=" + Id;
                }
                else if (type == 3) {
                    location.href = "TrainUserDetails.html?gId=" + Id;
                }
                else if (type == 4) {
                    location.href = "PrivateUserDetails.html?gId=" + Id;
                }
                else if (type == 5) {
                    location.href = "MyActivityInfo.html?gId=" + Id;
                }
                else if (type == 6) {
                    location.href = "MyMatchInfo.html?gId=" + Id;
                }
                else if (type == 7) {
                    location.href = "BuyCardInfo.html?gId=" + Id;
                }
                else if (type == 9) {
                    location.href = "TrainCardUserDetails.html?gId=" + Id;
                }
            },
            //indexSelect: function (event) {
            //    this.indexId = event.target.value;
            //    this.page = 1;
            //    page.getInfo();
            //    console.log(event.target.value);//在这里可以正确输出每个下拉框对应的下标值，当然输出值都是可以的
            //},
            choose: function (indexId,index) {
                var that = this;
                that.indexId = indexId;
                that.page = 1;
                $('.am-nav-tabs').each(function () {
                    $(this).children('.am-u-sm-3').removeClass('am-active ');
                })
                $('.am-nav-tabs').children('.am-u-sm-3').eq(index).addClass('am-active ');
                //page.getInfo();

            }
        },
        watch: {
            page: function () {
                this.getInfo();
            },
            indexId: function () {
                this.getInfo();
            },
        }
    });
    $(function () {
        page.getInfo();
    })
</script>
